<template>
  <div class="pd30 produceFactory">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>物联网设备监控</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="groupbtn flex">
            <el-input clearable v-model="queryParam.rescueCode" class="query-input m-r-15" placeholder="救援代码" />
            <el-input clearable v-model="queryParam.registerCode" class="query-input m-r-15" placeholder="电梯注册代码" />
            <el-button type="primary" >查询</el-button>
          </div>
        </div>
        <div class="flex e-list">
          <div v-for="item in dataList" :key="item.id" class="e-item">
            <div class="flex flexjcsb flexac">
              <div>{{item.installAddress}}</div>
              <el-button size="mini" type="danger" plain round>关注</el-button>
            </div>
            <div class="e-main m-t-20">
              <div class="flex flexac status-list">
                <el-image :src="require('@/assets/a1-2.png')"></el-image>
                <el-image :src="require('@/assets/a2-1.png')"></el-image>
                <el-button class="floor" icon="el-icon-caret-top" size="mini" plain round>{{item.currentFloor}}</el-button>
                <el-image :src="item.personStatus == 0 ? require('@/assets/a3-1.png') : require('@/assets/a3-2.png')"></el-image>
              </div>
              <el-image style="width:100%" fit="fill" :src="require('@/assets/room.png')"></el-image>
            </div>
          </div>
        </div>
        <el-pagination
          class="paginationWrap flex"
          :current-page="paging.currentPage"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { elevatorQueryList, realtimeDetailList } from '@/api/elevator/elevator'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  name: 'equipmentMonitor',
  props: {},
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      dataList: [],
      eList:[],
      queryParam: {

      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSystemList();
    let timer = setInterval(this.getSystemList,3000)
    this.$once('hook:beforeDestroy',()=>{
      clearInterval(timer)
    })
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/iotEquipment/equipmentMonitor/index' }))
  },
  methods: {
    getSystemList() {
      const params = ['','','',this.paging.currentPage,this.paging.pageSize,this.queryParam.registerCode,'',this.queryParam.rescueCode,'']
      elevatorQueryList(...params).then((res) => {
        if (res.code === '000000') {
          const i = res.data.map((item, i) => i)
          const ids = res.data.map((item, i) => item.id).join(',')
          this.eList = res.data;
          const params = {
            multiIds:ids,
            pageIndex:this.paging.currentPage,
            pageSize:this.paging.pageSize
          }
          realtimeDetailList(params).then(res=>{
            if(res.code === '000000'){
              this.dataList = res.data
              this.dataList.forEach((item,index)=>{
                this.eList.forEach((item2,index2)=>{
                  if(item.elevatorId === item2.id){
                    this.dataList[index].installAddress = item2.installAddress
                  }
                })
              })
            }
          })
          this.paging.total = i.length
        }
      })
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getSystemList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getSystemList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/public.scss';
.e-list{
  padding: 15px 10px;
  font-size: 14px;
  flex-wrap: wrap;
  .e-main{
    position: relative;
    .status-list{
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      z-index: 99;
      padding: 0 10%;
      >*{
        margin-right: 15px;
      }
      .floor{
        padding: 5px 10px;
      }
    }
  }
  
  .e-item{
    width: 25%;
    text-align: center;
    padding: 15px 30px;
  }
}
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>


